@import "src/style/index";

.logout{
    padding:7.5px 0;
    border-top:1px solid #292C33;
    text-align:center;
    button{
        background:#fff;
        border-radius:4px;
        border:1px solid #d8d8d8;
        height:25px;
        line-height:23px;
        padding:0 10px;
    }
    .ic{
        display: inline-block;
        width:30px;
        height:30px;
        position:relative;
        &:hover{
            .msg{display:block;}
        }
        .msg{
            display:none;
            position:absolute;
            z-index:3;
            padding:4px 7px;
            background-color:#26292E;
            top:-58px;
            left:-50px;
            width:180px;
            line-height:20px;
            border-radius:5px;
            color:#fff;
            font-size:12px;
            box-shadow:1px 1px 0px rgba(255, 255, 255, 0.19);
            &:after{
                content: "";
                position:absolute;
                bottom:-16px;
                left:56px;
                width: 8px;
                height: 8px;
                border:8px solid transparent;
                border-top-color:#26292E;

            }

        }
        &.qq .msg{
            width:200px;
            left:-82px;
            &:after{
                left:89px;
            }
        }
        &:not(:first-child){
            margin-left:14px;
        }
    }
}
.list {
      overflow:hidden;
        height:455px;
        // overflow-y: auto;
        overflow:hidden;
        position:relative;
    li {
        padding: 13px 15px;
        border-bottom: 1px solid #292C33;
        cursor: pointer;
        transition: background-color .1s;
        position:relative;
        &:hover {
            background-color: rgba(255, 255, 255, 0.03);
        }
        &.active {
            background-color: #464e55;
        }
        &.hide{
            display: none;
        }
        .dot{
            position:absolute;
            left: 42px;
            top: 9px;
            width: 8px;
            height: 8px;
            border-radius:100%;
            background:#f71b1b;
        }
    }
    .avatar{
        display:inline-block;
        margin:0;
        background:#f1f1f1;
    }
    .avatar img, .name {
        vertical-align: middle;
    }
    .avatar, .avatar img{
        border-radius: 5px;
    }
    .name {
        display: inline-block;
        margin: 0 0 0 15px;
        max-width: 110px;
    }
}
    